<template>
  <div>
    <input v-model="query" />
    <transition-group
      tag="ul"
      :css="false"
      @before-enter="beforeEnter"
      @enter="enter"
      @leave="leave"
    >
      <li v-for="(item, index) in list" :key="item" :data-index="index">{{item}}</li>
    </transition-group>
  </div>
</template>
<script>
import velocity from "velocity-animate";
export default {
  data() {
    return {
      query: "",
      items: ["Bruce Lee", "Jackie Chan", "Chuck Norris", "Jet Li", "Kung Fury"]
    };
  },
  computed: {
    list() {
      return this.items.filter(
        item => ~item.toLowerCase().indexOf(this.query.toLowerCase())
      );
    }
  },
  methods: {
    beforeEnter(ref) {
      ref.style.opacity = 0;
      ref.style.height = 0;
    },
    enter(ref, done) {
      const delay = ref.dataset.index * 100;
      setTimeout(
        () =>
          velocity(ref, { opacity: 1, height: "1.6em" }, { complete: done }),
        delay
      );
    },
    leave(ref, done) {
      const delay = ref.dataset.index * 100;
      setTimeout(
        () => velocity(ref, { opacity: 0, height: 0 }, { complete: done }),
        delay
      );
    }
  }
};
</script>